<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M332.8 917.333333c-8.533333 0-17.066667-4.266667-21.333333-8.533333-12.8-12.8-12.8-34.133333 0-46.933333l332.8-349.866667-332.8-349.866667C298.666667 149.333333 298.666667 128 311.466667 115.2c12.8-12.8 34.133333-12.8 46.933333 0l354.133333 371.2c12.8 12.8 12.8 29.866667 0 42.666667l-354.133333 371.2c-8.533333 12.8-17.066667 17.066667-25.6 17.066666z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(26,19,17)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
